<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementPlus的入门程序</title>

    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <style>
        .grid{
            line-height: 28px; height: 28px;
        }
        .class1{
            background-color: yellow;
        }
        .class2{
            background-color: red;
        }
        .class3{
            background-color: green;
        }
        .class4{
            background-color: blue;
        }
    </style>
</head>
<body>
<!--
    elementPlus 的使用:
      1、el-tag   标签的使用
        对应的属性: type 按钮的类型
-->
<div id="app">
    <!--:gutter子元素之间的间距-->
    <el-row :gutter="5">
        <el-col :span="6">
            <div class="grid class1"></div>
        </el-col>
        <el-col :span="6">
            <div class="grid class2"></div>
        </el-col>
        <el-col :span="9">
            <div class="grid class3"></div>
        </el-col>
        <el-col :span="3">
            <div class="grid class4"></div>
        </el-col>
    </el-row>

    <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="Activity name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="Activity zone">
            <el-select v-model="form.region" placeholder="please select your zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>

    </el-form>
</div>

<script>
    const { createApp, reactive,ref } = Vue;
    const app = createApp({
        setup(){

            const form = reactive({
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            })

            return {
                form
            }
        }
    });
    app.use(ElementPlus)
    app.mount('#app');
</script>
</body>
</html>